<template>
  <div id="info-container">
    <!--  头部  -->
    <div class="" style="width: 100%;height: 450px;background: #505050;position: relative;">
      <div>图片</div>
      <!--  菜单    -->
      <div style="position: absolute;bottom: 0;left: 0;right: 0;z-index: 9;text-align: center">
        <div class="menu-box container" style="margin: 0 auto;display: flex;align-items: center;">
          <div class="menu-box-item" v-for="item in 6" :key="item"
               style="color:#333333;background: rgba(255,255,255,0.8);height: 65px;width: 140px;line-height: 65px;border: 1px solid #fff">
            <div style="font-size: 20px">个人信息</div>
          </div>
        </div>
      </div>
    </div>
    <div class="container middle">
      <div class="page-header">
        <div class="page-title">{{isfromLaywer ? '律师信息' : '个人信息'}}</div>
        <div class="page-extend">
          <el-button class="publish-btn" type="primary">发布债权</el-button>
        </div>
      </div>
      <div class="page-body">
        <el-form label-position="top" label-width="120px">
          <!--          -->
          <div class="user-info-box" style="display: flex;width: 100%;">
            <div class="user-info-left" style="flex: 1">
              <div class="input-item">
                <div class="input-label">用户名</div>
                <div class="input-content">
                  <el-input placeholder="请输入用户名"></el-input>
                </div>
              </div>
              <div class="input-item">
                <div class="input-label">昵称</div>
                <div class="input-content">
                  <el-input placeholder="请输入昵称"></el-input>
                </div>
              </div>
              <div class="input-item">
                <div class="input-label">手机号</div>
                <div class="input-content">
                  <el-input placeholder="请输入手机号"></el-input>
                </div>
              </div>
              <div class="input-item">
                <div class="input-label">身份证号</div>
                <div class="input-content">
                  <el-input placeholder="请输入身份证号"></el-input>
                </div>
              </div>
            </div>
            <!--  头像    -->
            <div class="user-info-right" style="flex: 1;">
              <div style="text-align:center;position: relative;margin-top: 50px">
                <img style="width: 220px;height: 220px;margin: 0 auto" src="~@/assets/img/laywer.png" alt="">
              </div>
              <div style="text-align:center;margin-top: 25px;color:#666666;font-size: 22px">个人头像</div>
            </div>
          </div>
          <div class="input-item">
            <div class="input-label">地址信息</div>
            <div class="input-content">
              <el-input placeholder="请输入地址信息"></el-input>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserInfo",
  props: {
    isfromLaywer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        name: ''
      }
    }
  },
  mounted(){
    
  }
}
</script>

<style scoped>
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .page-header .page-title {
    color: #333333;
    font-size: 36px;
  }
  .page-header .page-extend {
    display: flex;
  }

  .publish-btn {
    font-size: 20px;
    width: 200px;
    height: 60px;
    background: linear-gradient(41deg, #0083FF 0%, #5EB2FF 100%);
    border-radius: 4px;
  }

  .input-item {
    flex: 1;
    padding-right: 50px;
    margin-bottom: 20px
  }
  .input-item .input-label {
    font-size: 18px;
    color: #666;
    margin-bottom: 10px;
  }

  .input-item >>> .el-input__inner{
    color: #999999;
    background: #F9F9F9;
    font-size: 16px;
    border-radius: 2px;
    border: 1px solid #eee;
  }

</style>
